<template>
    <div class="head">
        <span>消息</span>
        <van-icon name="brush-o" />
        <van-icon name="search" />
    </div>


    <div class="xx">
        <img src="../assets/images/12.jpeg">
        <div class="text">
            <h3>活动通知</h3><van-tag round color="#98ffff">官方</van-tag>

            <div>
                <van-text-ellipsis :content="text" />
                <span class="time">22:09</span>
            </div>
        </div>
    </div>
        <div class="xx">
        <img src="../assets/images/13.jpg">
        <div class="text">
            <h3>系统通知</h3><van-tag round color="#98ffff">官方</van-tag>

            <div>
                <span class="author">繁华彼岸发布了帖子</span>
                <span class="time">15:21</span>
            </div>
        </div>
    </div>

        <div class="xx">
        <img src="../assets/images/2.jpg">
        <div class="text">
            <h3>小小空罐头</h3><van-tag round color="#fdc8ff">达人</van-tag>

            <div>
                <span class="author">摩羯座本周在生活中会努力让自己享受专注的感觉</span>
                <span class="time">5-13</span>
            </div>
        </div>
    </div>

    <div class="xx">
        <img src="../assets/images/4.jpg">
        <div class="text">
            <h3>小埋</h3><van-tag round color="#fdc8ff">达人</van-tag>

            <div>
                <span class="author">[动画表情]</span>
                <span class="time">5-20</span>
            </div>
        </div>
    </div>


    <div class="xx">
        <img src="../assets/images/5.jpg">
        <div class="text">
            <h3>小年糕糕</h3><van-tag round color="#fdc8ff">达人</van-tag>

            <div>
                <span class="author">在面对一些重要的事情时也会更用心对待。</span>
                <span class="time">5-25</span>
            </div>
        </div>
    </div>


    <div class="xx">
        <img src="../assets/images/6.jpg">
        <div class="text">
            <h3>一杯冰美式</h3><van-tag round color="#fdc8ff">达人</van-tag>

            <div>
                <span class="author">感情方面，本周摩羯座在生活中会对即将经历的事情更加在意</span>
                <span class="time">5-29</span>
            </div>
        </div>
    </div>


    <div class="xx">
        <img src="../assets/images/7.jpg">
        <div class="text">
            <h3>晚睡小狗</h3><van-tag round color="#fdc8ff">达人</van-tag>

            <div>
                <span class="author">你会比较抗拒把自己的好朋友介绍给其他人，也不希望别人可以比你和朋友的关系更近</span>
                <span class="time">5-31</span>
            </div>
        </div>
    </div>

    <div class="xx">
        <img src="../assets/images/8.jpg">
        <div class="text">
            <h3>山山而川</h3><van-tag round color="#fdc8ff">达人</van-tag>

            <div>
                <span class="author">本周在和其他人的相处过程中会保持比较稳定的状态</span>
                <span class="time">6-1</span>
            </div>
        </div>
    </div>

    <div class="xx">
        <img src="../assets/images/9.jpg">
        <div class="text">
            <h3>七十二时</h3><van-tag round color="#fdc8ff">达人</van-tag>
            <div>
                <span class="author">这也可能会让对方有一种你对他不是很感兴趣的错觉</span>
                <span class="time">6-3</span>
            </div>
        </div>
    </div>

    <div class="xx">
        <img src="../assets/images/10.jpg">
        <div class="text">
            <h3>卡夫卡的熊</h3><van-tag round color="#fdc8ff">达人</van-tag>

            <div>
                <span class="author">本周在和另一半的相处过程中会比较希望两个人可以达成一些共识</span>
                <span class="time">6-5</span>
            </div>
        </div>
    </div>

    <div class="xx">
        <img src="../assets/images/11.jpg">
        <div class="text">
            <h3>从月亮走向月亮</h3><van-tag round color="#fdc8ff">达人</van-tag>
            <div>
                <span class="author">学习方面，摩羯座在本周的学习场景中会比较容易出现懈念的情绪</span>
                <span class="time">6-4</span>
            </div>
        </div>
    </div>

    <div class="xx">
        <img src="../assets/images/12.jpg">
        <div class="text">
            <h3>小王子的44次日落</h3><van-tag round color="#fdc8ff">达人</van-tag>

            <div>
                <span class="author">部分摩羯座会在参加培训或辅导的过程中开小差甚至逃课逃学</span>
                <span class="time">6-2</span>
            </div>
        </div>
    </div>


    <bottom-nav />
</template>

<script>
import { createApp } from 'vue';
import { SwipeCell } from 'vant';
import BottomNav from '../components/BottomNav.vue'
const app = createApp();
app.use(SwipeCell);

export default {
    setup() {
    const text = '1v1分析个人星盘，陪你走出感情、事业、财富困局，倾听你的故事';
    return { text };
  },
    components: {
        BottomNav,
    }
}
</script>

<style scoped>
.head {
    padding: 10PX;
}

.head .van-icon {
    float: right;
    display: inline;
    color: #606060;
    padding-right: 10px;
    padding-top: 10px;
}

.head span {
    margin-left: 10px;
    color: #606060;
}

.xx {
    border-bottom: 1px dashed #ccc;
    padding-bottom: 4px;
    margin-left: 25px;
    margin: 4px auto;
    overflow: hidden;
    width: 85%;
    display: flex;

}

.xx img {
    float: left;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #aaddf7;
    border: 1px solid #000;
    margin-top: 20px;
}

.xx .text {
    float: left;
    width: 600px;
    margin-left: 8px;
    position: relative;
}

.text h3 {
    font-size: 16px;
    color: #000;
    line-height: 20px;
}
.text .van-tag{
    margin: 5px;
}
.text span, .van-text-ellipsis {
    font-size: 12px;
    line-height: 22px;
    color: #888;
}

.van-text-ellipsis {
    margin-left: 10px;
}
.time{
    float: right;
}

</style>